<div class="panel panel-default">

  <div class="panel-heading">
    <h3 class="panel-title">Categorias</h3>
  </div>

  <div class="panel-body">
    <div id="custom-toolbar">
        <div class="form-inline" role="form">
            <button type="submit" class="btn btn-default" id="btnNuevo">
              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Nuevo
            </button>
        </div>
    </div>
    <table id="table" data-search="true" data-toolbar="#custom-toolbar" data-side-pagination="server" 
        data-pagination="true" data-page-list="[10, 20, 30]"
        data-url="<?php echo base_url();?>index.php/categoria/listaCategorias">
      <thead>
        <tr>
          <th data-field="ID_CATEGORIA" data-align="center" data-sortable="false">ID</th>
          <th data-field="NOMBRE" data-align="center" data-sortable="false">NOMBRE</th>
          <th data-field="ID_CATEGORIA" data-width="90" data-align="center" data-sortable="false" 
              data-formatter="formatEditar"></th>
        </tr>
      </thead>
    </table>
  </div>
</div>

<div id="dialogCategoria" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 id="lblTitulo" class="modal-title"></h4>
      </div>
      <form id="formCategoria" class="form-horizontal" method="post" action="<?php echo base_url();?>index.php/categoria/guardar">
        <div class="modal-body">
          <div class="form-group">
            <label class="col-sm-3 control-label">Id</label>
            <div class="col-sm-9">
              <span id="lblId"></span>
              <input type="hidden" class="form-control" id="id" name="id">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Nombre</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="nombre" name="nombre" required>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
  $(function() {
    $('#table').bootstrapTable({});

    $('#formCategoria').ajaxForm({
      success: function (response, statusText) {
        $('#dialogCategoria').modal('hide');
        $('#table').bootstrapTable('refresh', {silent: true});
        BootstrapDialog.alert('Categoria guardada');
      }
    });

    $("#btnNuevo").click (function () {
      $('#formCategoria input').val('');
      $('#lblId').text('');
      $('#lblTitulo').text('Nueva Categoria');
      $('#dialogCategoria').modal('show');
    });
  });

  function formatEditar (value, row) {
    return '<button class="btn btn-default btn-xs" type="button" onclick="editar(' + value + 
      ')"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>';
  }

  function editar (value) {
    $.ajax({
      url: '<?php echo base_url();?>index.php/categoria/elementoCategoria',
      type: 'POST',
      async: true,
      data: 'id=' + value,
      success: function (data, textStatus, jqXHR) {
        $('#lblId').text(data.ID_CATEGORIA);
        $('#id').val(data.ID_CATEGORIA);
        $('#nombre').val(data.NOMBRE);
      }, 
      error: function (jqXHR, textStatus, errorThrown) {
        alert ("error: " + textStatus);
      }
    });
    $('#lblTitulo').text('Editar Categoria');
    $('#dialogCategoria').modal('show');
  }
</script>